// webpack 配置文件
const path = require('path')
// 导入clean-webpack-plugin 插件，解构出 CleanWebpackPlugin 成员
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 在dist目录下 可以自动生成  index.html 文件，就不用根目录下的 index.html 文件了
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 静态文件打包
const CopyWebpackPlugin = require('copy-webpack-plugin')


// console.log(path)
// console.log(__dirname) // /Users/lowryzhang/Downloads/part2/2-2-test/03-webpack-start

module.exports = {
    mode: 'none',
    entry: './src/main.js', // 指定入口文件，原本未指定是 `./src/index.js`
    output: {
        filename: 'bundle.js', // 指定出口文件,原本未指定会在`./dist/bundle.js`
        path: path.join(__dirname, 'dist'), // path 的参数必须是绝对路径
        // publicPath: 'dist/' // 这个配置是在未使用 html-webpack-plugin 插件，对根目录下的index.html引用路径指向
    },
    module: {
        // webpack 默认只能加载 JavaScript 文件,若要加载其他类型的资源文件，需要 安装相应的 loader,并进行相应的配置
        rules: [
            // {
            //     test: /.js$/,
            //     use: {
            //         loader:'babel-loader', // babel 只是一个转换平台，需要转换什么，就要加载和配置相应的插件
            //         options:{
            //             presets:['@babel/preset-env']
            //         }
            //     }
            // },
            {
                test: /.css$/,
                use: [ // loader 的加载是从下往上的，所以 把需要先加载的放到下面
                    'style-loader', // style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中
                    'css-loader'
                ]
            },
            // html 处理loader
            {
                test: /.html$/,
                use: {
                    loader: 'html-loader',
                    options:{
                        // attrs 属性
                        attrs:['img:src','a:href']
                    }
                }
            },
            {
                test: /.png$/,
                use: {
                    loader: 'url-loader', // 适合体积小的，避免打包过于厚重，影响速度
                    options:{
                        limit : 10 * 1024 // 10KB,超过10KB,就会用file打包
                    }
                }
            },
            {
                test: /.jpeg$/,
                use: {
                    loader: 'url-loader', // 适合体积小的，避免打包过于厚重，影响速度
                    options:{
                        limit : 10 * 1024 // 10KB,超过10KB,就会用file打包
                    }
                }
            },
            {
                test: /.png$/,
                use: 'file-loader' // 在dist 文件夹中会出现一个拖文件
            },
            {
                test: /.jpeg$/,
                use: 'file-loader' // 在dist 文件夹中会出现一个拖文件
            }
        ]
    },
    // 插件配置
    plugins:[
        // 大多数插件导出的是一个类型，用 new 获取一个实例
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'Webpack Tutorials',
            meta:{
                viewport:'width=device-width'
            },
            template:'./src/index.html'
        }),
        // 开发阶段最好不要使用这个插件，如果静态文件很多，经常打包会无端增加内存开销。
        new CopyWebpackPlugin(['public'])
    ]
}